<template id="person_psd">
    <div>
        <div class="bindPhone_con">
            <div class="bindPhone_top">
                <img src="../image/blue_da.png" alt="" @click="get_p()">
                <h4>设置密码</h4>
            </div>
            <!--设置密码-->
            <div  class="bindPhone_form_con_3" >
                <!--手机号没有被注册新用户注册得到密码-->
                <form action="" id="bindPhone_form_23">
                    <p>
                        <input type="text" placeholder="手机号" class="bindPhone_test1">
                        <img src="../image/blue_phone.png" alt="">
                        <span id="bindPhone_back_get_code">获取验证码</span>
                    </p>
                    <p>
                        <input type="text" placeholder="输入验证码" class="bindPhone_test">
                        <img src="../image/blue_yan.png" alt="">
                    </p>
                    <p>
                        <input placeholder="输入新密码"  class="bindPhone_test">
                        <img src="../image/blue_psd.png" alt="">
                        <img src="../image/blue_yin.png" alt="" v-if="passd">
                        <img src="../image/kesi.png" alt="" v-if="psd">
                    </p>
                    <p><span @click="backPwd()">设置密码完成</span></p>
                    <p style="display:none">
                        <span>未收到验证码？</span>
                    </p>
                </form>

            </div>

        </div>

        <!--未收到验证码弹窗-->
        <div class="model_y" v-if="model_show">
            <h3>提示</h3>
            <p>验证码的有效时间为30分钟,请耐心等待</p>
            <p><span>继续等待</span><span>联系客服</span></p>
        </div>
        <!--背景弹窗-->
        <div class="back_bg" v-if="bg_backgrond" @click="get_all()"></div>
    </div>
</template>

<script>
    export default {
        name: 'person_psd',
        data() {
            return {
                //背景
                bg_backgrond:false,
                //未收到验证码
                model_show:false,
                passd:true,
                psd:false,
            }
        },

        mounted: function () {

        },
        methods: {
            get_wait:function(){
                this.model_show=true;
                this.bg_backgrond=true;
            },
            get_all:function () {
                this.model_show=false;
                this.bg_backgrond=false;
            },
            get_p:function(){
                window.history.go(-1);
            }
        }
    }
</script>
<style>
    #bindPhone_form_23 p:nth-of-type(5) span:nth-of-type(1){
        height:0.3rem;
        float:right;
        /*line-height:0.83rem;*/
        font-size:0.22rem;
        color:#2eaffc;
        font-weight:700;
    }
    #bindPhone_form_23 p:nth-of-type(5){
        width:5.1rem;
        height:0.83rem;
    }
    #bindPhone_form_23 p:nth-of-type(4) span{
        width:5rem;
        height:0.68rem;
        display:block;
        color:#ffffff;
        background:#bebebe;
        font-size:0.3rem;
        line-height:0.68rem;
        text-align:center;
        margin:0.47rem auto;
        border-radius:0.05rem;
    }
    #bindPhone_form_23 p:nth-of-type(4) span.selected{
        background-color: #2eaffc;
    }
    #bindPhone_form_23 p:nth-of-type(4){
        width:5.1rem;
        height:1.17rem;
    }
    #bindPhone_form_23 p:nth-of-type(3){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #bcb3a1;
        position:relative;
        padding-top:0.45rem;
    }
    #bindPhone_form_23 p:nth-of-type(3) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /* line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #bindPhone_form_23 p:nth-of-type(3) img:nth-of-type(1){
        display:block;
        width:0.42rem;
        height:0.42rem;
        position:absolute;
        left:0;
        top:0.45rem;
    }
    #bindPhone_form_23 p:nth-of-type(3) img:nth-of-type(2){
        display:block;
        width:0.42rem;
        height:0.42rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    #bindPhone_form_23 p:nth-of-type(3) img:nth-of-type(3){
        display:block;
        width:0.42rem;
        height:0.42rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    .bindPhone_test::-webkit-input-placeholder{
        color:#d1d1d2;
        font-size:0.2rem;
    }
    #bindPhone_form_23 p:nth-of-type(2) input{
        width:5.1rem;
        height:0.54rem;
        display:block;
        outline: none;
        border:0;
        /*   line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #bindPhone_form_23 p:nth-of-type(2) img{
        display:block;
        width:0.42rem;
        height:0.42rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #bindPhone_form_23 p:nth-of-type(2){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #bcb3a1;
        position:relative;
        padding-top:0.45rem;
    }
    .bindPhone_test1::-webkit-input-placeholder{
        color:#d1d1d2;
        font-size:0.2rem;
    }
    #bindPhone_form_23 p:nth-of-type(1) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #bindPhone_form_23 p:nth-of-type(1) span{
        display:block;
        position:absolute;
        width:1.43rem;
        height:0.45rem;
        background:#2eaffc;
        color:#ffffff;
        line-height:0.45rem;
        text-align:center;
        font-size:0.2rem;
        border-radius:0.05rem;
        top:0.2rem;
        right:0;
    }
    #bindPhone_form_23 p:nth-of-type(1){
        width:5.1rem;
        height:0.55rem;
        border-bottom:0.01rem solid #bcb3a1;
        position:relative;
        padding-top:0.2rem;
    }
    #bindPhone_form_23 p:nth-of-type(1) img{
        display:block;
        width:0.42rem;
        height:0.42rem;
        position:absolute;
        top:0.14rem;
        left:0;
    }
    #bindPhone_form_23{
        width:5.1rem;
        height:4.4rem;
        display:block;
        margin:0 auto;
        /*  background:red;*/
    }
    .bindPhone_form_con_3{
        height:3.45rem;
        width:100%;
        padding-top:2.8rem;
    }
    .back_bg{
        height:100%;
        width:1000%;
        background:#000000;
        opacity:0.5;
        position: fixed;
        top:0;
        left:0;
        z-index:1;
    }
    /*背景弹窗*/
    .model_y p:nth-of-type(2) span{
        flex:1;
        color:#0870d7;
        font-size:0.28rem;
        height:0.7rem;
        line-height:0.7rem;
        text-align:center;
    }
    .model_y p:nth-of-type(2) span:nth-of-type(1){
        border-right:0.01rem solid #d9d4cc;
    }
    .model_y p:nth-of-type(2){
        height:0.7rem;
        width:4.62rem;
        border-top:0.01rem solid #d9d4cc;
        display:flex;
    }
    .model_y p:nth-of-type(1){
        height:0.3rem;
        line-height:0.3rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
        margin-bottom: 0.25rem
    }
    .model_y h3{
        width:4.62rem;
        height:0.56rem;
        text-align:center;
        line-height:0.56rem;
        font-size:0.24rem;
        color:#000000;
        font-weight:normal;
    }
    .model_y{
        height:1.82rem;
        width:4.62rem;
        background:#ffffff;
        border-radius:0.1rem;
        position:fixed;
        top: 38%;
        left: 14%;
        z-index:2;
    }
    /*未收到验证码弹窗*/
    .bindPhone_top{
        height:0.75rem;
        width:100%;
        position:relative;
    }
    .bindPhone_top img{
        height:0.33rem;
        width:0.32rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .bindPhone_top h4{
        height:0.75rem;
        color:#2eaffc;
        font-size:0.24rem;
        line-height:0.75rem;
        text-align:center;
        font-weight:normal;
    }
    .bindPhone_con{
        width:100%;
        height:11rem;
        background:url(../image/login.png) no-repeat;
        background-size:cover;
    }
</style>